<!--
 * @Descripttion   
 * @version        
 * @Author         Xiaoqi Lai
 * @Date           2021-07-04 21:26:24
 * @LastEditors    Xiaoqi Lai
 * @LastEditTime   2021-07-05 22:36:22
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <title>智能家居用户操作界面</title>
  <style type="text/css">
    button {
      margin: 20px auto;
      width: 200px;
      padding: 8px;
      background-color: #428bca;
      border-color: #357ebd;
      color: #fff;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px;
      -khtml-border-radius: 10px;
      text-align: center;
      vertical-align: middle;
      border: 1px solid transparent;
      font-weight: 900;
      font-size: 125%;
    }

    button:hover {
      cursor: pointer;
    }

    button:active {
      background-color: #2a6192;
      cursor: pointer;
    }

    #main {
      display: block;
      width: 500px;
      height: 50px;
      margin: 0 auto;
    }

    #TandH,
    #door,
    #win,
    #wait,
    #init {
      display: block;
      width: 500px;
      height: 80px;
      margin: 10px auto;
    }

    #wait {
      background-color: green;
    }

    #span {
      margin: 20px auto;
    }

    #lightTest,
    #safe {
      margin: 0 auto;
      display: block;
      width: 600px;
      position: relative;
    }

    #off,
    #safeOff {
      position: absolute;
      right: 0;
      transform: translateX(-50%);
    }

    .text {
      width: 240px;
      height: 24px;
      padding: 7px 9px;
      line-height: 24px;
      font-size: 14px;
      font-weight: bold;
      color: #333;
      border: 1px solid;
      border-color: #cececf;
      border-radius: 0;
      background: white;
      box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
      -webkit-appearance: none;
    }

    .text:focus {
      outline: none;
      border-color: #92afed;
      box-shadow: 0 0 5px #92afec, inset 1px 1px 2px rgba(0, 0, 0, 0.1);
    }

    #commitspan,
    #commitlightspan {
      background-color: #ccc;
      width: 50px;
      height: 30px;
      display: inline-block;
      text-align: center;
      margin: 10px;
      border-radius: 3px;
    }

    #commitspan:hover,
    #commitlightspan:hover {
      cursor: pointer;
    }
  </style>
</head>

<body background="./back.jpg">
  <div id="main">
    <button id="wait">命令状态
      <div id="waitStatus">系统空闲</div></button>
    <div id="lightTest"> <button id="on">Light on</button>
      <button id="off">Light off</button></div>


    <div id="span"><span>请输入舵机旋转角度: </span><input type="text" name="xsbp" class="text" id="xsbp" /><span
        id="commitspan">提交</span></div>
    <div id="span"><span>请输入灯泡亮度: </span><input type="text" name="xlcp" class="text" id="xlcp" /><span
        id="commitlightspan">提交</span></div>
    <button id="init">
      点击获取当前所有传感器的状态
      <div id="initStatus"></div></button>

    <button id="TandH">
      点击获取当前温度和湿度
      <div id="temp"></div></button>
    <button id="door">
      点击获取当前门的开关状态
      <div id="doorStatus"></div></button>
    <button id="win">
      点击获取当前窗的开关状态
      <div id="winStatus"></div></button>
    <div id="safe">
      <div id="safeStatus">当前安保状态</div>
      <button id="safeOn">
        点击开启安保检测
      </button>
      <button id="safeOff">
        点击关闭安保检测
      </button>

    </div>
</body>
<script>
  get = function (url, query, succCb, failCb, isJson) {
    if (query) {
      var parms = tools.formatParams(query);
      url += "?" + parms;
    }
    var ajax = new XMLHttpRequest();
    ajax.open("GET", url, true);
    ajax.send(null);

    ajax.onreadystatechange = function () {
      if (ajax.readyState === 4) {
        if (ajax.status === 200) {
          if (isJson === undefined) {
            isJson = true;
          }
          var res = isJson ?
            JSON.parse(ajax.responseText == "" ? "{}" : ajax.responseText) :
            ajax.responseText;
          succCb && succCb(res);
        } else {
          failCb && failCb();
        }
      }
    };
  };
  let on = document.getElementById("on");
  let off = document.getElementById("off");
  let TandH = document.getElementById("TandH");
  let door = document.getElementById("door");
  let doorStatus = document.getElementById("doorStatus");
  let win = document.getElementById("win");
  let winStatus = document.getElementById("winStatus");
  let xsbp = document.getElementById("xsbp");
  let xlcp = document.getElementById("xlcp");
  let wait = document.getElementById("wait");
  let waitStatus = document.getElementById("waitStatus");
  let commitspan = document.getElementById("commitspan");
  let commitlightspan = document.getElementById("commitlightspan");
  let safeOn = document.getElementById("safeOn");
  let safeOff = document.getElementById("safeOff");
  let safeStatus = document.getElementById("safeStatus")
  let init = document.getElementById("init")


  on.addEventListener("click", () => {
    get("/low");
  });
  off.addEventListener("click", () => {
    get("/high");
  });
  commitspan.addEventListener("click", () => {
    let str;
    text = parseInt(xsbp.value)
    if (text < 10) {
      str = '0' + text;
      console.log(str);
    } else {
      str = '' + text;
    }
    get("/xsb?param=" + str);
  })

  commitlightspan.addEventListener("click", () => {
    let str;
    text = parseInt(xlcp.value)
    if (text < 10) {
      str = '00' + text;
      console.log(str);
    } else if (text < 100) {
      str = '0' + text;
    } else {
      str = '' + text;
    }
    get("/xlc?param=" + str);
  })

  async function tandh() {
    for (var i = 0; i < 5; i++) {
      waitStatus.innerHTML = "系统繁忙请稍后..."
      wait.style.background = 'red'
      TandH.disabled = true
      win.disabled = true
      door.disabled = true
      await (function () {
        return new Promise(function (res, rej) {
          setTimeout(function () {
            get("/tandh", 0, (para) => {
              console.log(para.msg);
              if (para.msg != 'error') {
                temp.innerHTML = "Now:" + para.msg;
              }
            });
            res();
          }, 2000);
        });
      })();
    }
    waitStatus.innerHTML = "系统空闲"
    wait.style.background = 'green'
    TandH.disabled = false
    win.disabled = false
    door.disabled = false
  }

  async function doors() {
    for (var i = 0; i < 5; i++) {
      waitStatus.innerHTML = "系统繁忙请稍后..."
      wait.style.background = 'red'
      TandH.disabled = true
      win.disabled = true
      door.disabled = true
      await (function () {
        return new Promise(function (res, rej) {
          setTimeout(function () {
            get("/ds", 0, (para) => {
              console.log(para.msg);
              if (para.msg != 'error') {
                doorStatus.innerHTML = "Now:" + para.msg;
              }

            });
            res();
          }, 2000);
        });
      })();
    }
    waitStatus.innerHTML = "系统空闲"
    wait.style.background = 'green'
    TandH.disabled = false
    win.disabled = false
    door.disabled = false
  }

  async function wins() {
    for (var i = 0; i < 5; i++) {
      waitStatus.innerHTML = "系统繁忙请稍后..."
      wait.style.background = 'red'
      TandH.disabled = true
      win.disabled = true
      door.disabled = true
      await (function () {
        return new Promise(function (res, rej) {
          setTimeout(function () {
            get("/ws", 0, (para) => {
              console.log(para.msg);
              if (para.msg != 'error') {
                winStatus.innerHTML = "Now:" + para.msg;
              }
            });
            res();
          }, 2000);
        });
      })();
    }
    waitStatus.innerHTML = "系统空闲"
    wait.style.background = 'green'
    TandH.disabled = false
    win.disabled = false
    door.disabled = false
  }

  async function safeOns() {
    for (var i = 0; i < 5; i++) {
      waitStatus.innerHTML = "系统繁忙请稍后..."
      wait.style.background = 'red'
      TandH.disabled = true
      win.disabled = true
      door.disabled = true
      await (function () {
        return new Promise(function (res, rej) {
          setTimeout(function () {
            get("/xaa?param=1", 0, (para) => {
              console.log(para.msg);
              if (para.msg != 'error') {
                safeStatus.innerHTML = "Now:" + para.msg;
              }
            });
            res();
          }, 2000);
        });
      })();
    }
    waitStatus.innerHTML = "系统空闲"
    wait.style.background = 'green'
    TandH.disabled = false
    win.disabled = false
    door.disabled = false
  }

  async function safeOffs() {
    for (var i = 0; i < 5; i++) {
      waitStatus.innerHTML = "系统繁忙请稍后..."
      wait.style.background = 'red'
      TandH.disabled = true
      win.disabled = true
      door.disabled = true
      await (function () {
        return new Promise(function (res, rej) {
          setTimeout(function () {
            get("/xaa?param=0", 0, (para) => {
              console.log(para.msg);
              if (para.msg != 'error') {
                safeStatus.innerHTML = "Now:" + para.msg;
              }
            });
            res();
          }, 2000);
        });
      })();
    }
    waitStatus.innerHTML = "系统空闲"
    wait.style.background = 'green'
    TandH.disabled = false
    win.disabled = false
    door.disabled = false
  }

  async function inits() {
    for (var i = 0; i < 5; i++) {
      waitStatus.innerHTML = "系统繁忙请稍后..."
      wait.style.background = 'red'
      TandH.disabled = true
      win.disabled = true
      door.disabled = true
      await (function () {
        return new Promise(function (res, rej) {
          setTimeout(function () {
            get("/init", 0, (para) => {
              console.log(para.msg);
              if (para.msg != 'error') {
                var arr = para.msg.split('?')
                temp.innerHTML = arr[0];
                safeStatus.innerHTML = arr[1];
                doorStatus.innerHTML = arr[2];
                winStatus.innerHTML = arr[3];
              }
            });
            res();
          }, 2000);
        });
      })();
    }
    waitStatus.innerHTML = "系统空闲"
    wait.style.background = 'green'
    TandH.disabled = false
    win.disabled = false
    door.disabled = false
  }

  init.addEventListener("click", () => {
    inits()
  })

  safeOn.addEventListener("click", () => {
    safeOns()
  })

  safeOff.addEventListener("click", () => {
    safeOffs()
  })

  win.addEventListener("click", () => {
    wins();
  });

  door.addEventListener("click", () => {
    doors();
  });

  TandH.addEventListener("click", () => {
    tandh();
  });
</script>

</html>